<template>
  <div class="form">
    <NForm ref="ruleForm" :model="queryForm" :rules="rules">
      <NFormItem label="昵称" path="managerName">
        <n-input v-model:value="queryForm.managerName" placeholder="请输入" />
      </NFormItem>
      <NFormItem label="性别" path="sex">
        <n-select
          v-model:value="queryForm.sex"
          :options="baseInfoModel.sexOptions"
        />
      </NFormItem>
      <NFormItem label="邮箱" path="email">
        <n-input v-model:value="queryForm.email" placeholder="请输入" />
      </NFormItem>
      <NFormItem label="简介">
        <n-input
          v-model:value="queryForm.remark"
          type="textarea"
          placeholder="请输入"
        />
      </NFormItem>
      <NButton type="primary" attr-type="button" @click="handleValidateClick">
        <span>提交</span>
      </NButton>
    </NForm>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import {
  NForm,
  NFormItem,
  NInput,
  NButton,
  NSelect,
  useMessage
} from 'naive-ui'
import type { FormInst, FormRules } from 'naive-ui'
import baseInfoModel from './viewModel/baseInfoModel'
import type { ModelType } from './viewModel/baseInfoModel'
const toast = useMessage()
const queryForm = ref<ModelType>(baseInfoModel.getData())
const rules: FormRules = baseInfoModel.getRules()
const ruleForm = ref<FormInst | null>(null)
const handleValidateClick = (e: MouseEvent) => {
  e.preventDefault()
  ruleForm.value?.validate((errors: any) => {
    if (!errors) {
      baseInfoModel
        .save(queryForm.value)
        .then(() => {
          toast.success('修改成功')
        })
        .catch(err => {
          toast.error(err.message)
        })
    }
  })
}
</script>
<style scoped lang="scss">
.form {
  padding-bottom: 20px;
}
</style>
